<template>
  <div class="popup" v-if="isShow" :style="sceen_position">
    <div class="rode-name">
      <span>{{ rode_name }}</span>
      <button @click="isShow = false">❌</button>
    </div>
    <div class="video">
      <video :src="video_url" controls width="200" height="100"></video>
    </div>
  </div>
</template>

<script setup>
import { usePopup } from './Hooks/usePopup'
const { isShow, sceen_position, rode_name, video_url } = usePopup()
</script>

<style scoped>
.popup {
  z-index: 999;
  width: 250px;
  position: absolute;
  background: #f0f9eb;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rode-name {
  display: flex;
  justify-content: space-between;
  padding: 10px 10px 5px 5px;
}
button {
  width: 30px;
  height: 20px;
  border: none;
  outline: none;
  appearance: none;
  background: #005bac;
  transition: all 0.3s;
}
button:hover {
  cursor: pointer;
  box-shadow: 0 0 5px #005bac;
}
</style>
